// 1. ------------------------------- 获取学生列表 --------------------------------
const renderList = () => {
    axios.get('/students').then(result => {
        // console.log(result.data.data);
        let data = result.data.data
        let str = ''
        data.forEach(item => {
            str += `
            <tr>
                <td>${item.name}</td>
                <td>${item.age}</td>
                <td>${item.gender ? '女' : '男'}</td>
                <td>第${item.group}组</td>
                <td>${item.hope_salary}</td>
                <td>${item.salary}</td>
                <td>${item.province} ${item.city} ${item.area}</td>
                <td>
                <a href="javascript:;" class="text-success mr-3"><i data-id = "${item.id}" class="bi bi-pen"></i></a>
                <a href="javascript:;" class="text-danger"><i data-id = "${item.id}" class="bi bi-trash"></i></a>
                </td>
            </tr>
            `
        });
        document.querySelector('tbody').innerHTML = str
    })
}
renderList()


// 2. ------------------------------- 删除/修改 学生列表 --------------------------------
document.querySelector('tbody').addEventListener('click', function (e) {
    // 判断是否点击的是删除
    // console.dir(e.target);
    if (e.target.classList.contains('bi-trash')) {
        // console.log('点击了删除');
        let id = e.target.dataset.id

        axios.delete(`/students/${id}`).then(result => {
            renderList()
        })
    }
    // 判断是否点击的是修改
    if (e.target.classList.contains('bi-pen')) {
        document.querySelector('h5.modal-title').innerHTML = '修改学员'
        document.querySelector('h5.modal-title').setAttribute('data-id', e.target.dataset.id)
        // console.log('点击了修改');
        axios.get(`/students/${e.target.dataset.id}`).then(result => {
            let data = result.data.data
            console.log(data);
            // 处理市县
            axios.get('/api/city', { params: { pname: data.province } }).then(result => {
                let cities = result.data.data
                console.log(cities);
                let str = '<option value="">--城市--</option>'
                cities.forEach(item => str += `<option value="${item}">${item}</option>`)
                cs.innerHTML = str

                axios.get('/api/area', { params: { pname: data.province, cname: data.city } }).then(result => {
                    let areas = result.data.data
                    console.log(areas);
                    let str = '<option value="">--地区--</option>'
                    areas.forEach(item => str += `<option value="${item}">${item}</option>`)
                    as.innerHTML = str

                    val(document.querySelector('#form'), data)
                })

            })
            // 模态框显示
            modal.show()
        })
    }

})

// 3. -------------------------------     模态框   --------------------------------
// 找到页面中的模态框盒子
const modalBox = document.querySelector('#modal')

// 实例化模态框对象
const modal = new bootstrap.Modal(modalBox)


// 4. ------------------------------- 添加学员 --------------------------------
document.querySelector('#openModal').addEventListener('click', function () {
    document.querySelector('#form').reset()

    document.querySelector('h5.modal-title').innerHTML = '添加学员'
    // 点击添加模态框显示
    modal.show()
})

// . ------------------------------- 初始化省市县 --------------------------------
let ps = document.querySelector('[name=province]') //省
let cs = document.querySelector('[name=city]') //市
let as = document.querySelector('[name=area]') //县

const initCity = () => {
    axios.get('/api/province').then(result => {
        // console.log(result.data.data);
        let provinces = result.data.data
        let str = '<option value="">--省份--</option>'
        provinces.forEach(item => str += `<option value="${item}">${item}</option>`)
        ps.innerHTML = str
    })
    // 切换省的时候获取市
    ps.addEventListener('change', function () {
        as.innerHTML = '<option value="">--地区--</option>'
        axios.get('/api/city', { params: { pname: ps.value } }).then(result => {
            let cities = result.data.data
            console.log(cities);
            let str = '<option value="">--城市--</option>'
            cities.forEach(item => str += `<option value="${item}">${item}</option>`)
            cs.innerHTML = str
        })
    })
    // 切换市的时候获取地区
    cs.addEventListener('change', function () {
        axios.get('/api/area', { params: { pname: ps.value, cname: cs.value } }).then(result => {
            let areas = result.data.data
            console.log(areas);
            let str = '<option value="">--地区--</option>'
            areas.forEach(item => str += `<option value="${item}">${item}</option>`)
            as.innerHTML = str
        })
    })
}
initCity()


// . ------------------------------- 添加学员  修改--------------------------------
document.querySelector('#submit').addEventListener('click', function () {
    let data = val(document.querySelector('#form'))
    data.age = +data.age
    data.gender = + data.gender
    data.salary = +data.salary
    data.hope_salary = +data.hope_salary
    data.group = +data.group


    let title = document.querySelector('h5.modal-title').innerHTML
    
    if (title === '添加学员') {
        // 发送请求
        axios.post('/students', data).then(result => {
            console.log(result);
            // 添加成功，重新获取数据，重新渲染到页面
            renderList()
            // 隐藏模态框
            modal.hide()
        })

    } else if(title === '修改学员') {
            let id = document.querySelector('h5.modal-title').dataset.id
            axios.put(`/students/${id}`,data).then(result => {
                renderList()
                // 隐藏模态框
                modal.hide()
            })
    }
})